<template>
  <div>
    <el-dialog
      v-if="dialogVisible"
      title="手动改签"
      :visible.sync="dialogVisible"
      width="850px"
      :close-on-click-modal="false"
    >
      <div class="container" v-loading="loading">
        <div>
           <div class="mb14" style="font-size: 12px;color:#F56464;"> 注:只能同产品同套餐改签，请选择日期进行改签。</div>
          <el-table
            :data="changeList"
            tooltip-effect="dark"
            size="small"
            :row-key="(row) => { return row.id }"
       
          >
          <el-table-column label="" min-width="30">
            <template scope="scope">
              <div  style="text-align: center;">
                <el-radio v-model="templateRadio" :label="scope.row.id" @change.native="getTemplateRow(scope.$index,scope.row)">&nbsp</el-radio>
              </div>
            </template>
          </el-table-column>
            <el-table-column align="center" label="日期" min-width="120">
              <template slot-scope="scope">
                <div class="" style="text-align: center;">
                  <div>{{scope.row.date}}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="产品信息" min-width="200">
              <template slot-scope="scope">
               <div class="acea-row" style="align-items: center;">
                  <div class="demo-image__preview">
                    <el-image :src="scope.row.product.image" :preview-src-list="[scope.row.product.image]" />
                  </div>
                  <span
                    class="tabBox_tit"
                  >{{ scope.row.product.store_name }}
                  {{scope.row.productMeal && scope.row.productMeal.title?  (' | '+scope.row.productMeal.title):''}}
                </span>

                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="价格" min-width="80">
              <template slot-scope="scope">
                <span>{{scope.row.price}}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column align="center" label="运费" min-width="80">
              <template slot-scope="scope">
                <span>{{scope.row.postage_price}}</span>
              </template>
            </el-table-column>  -->
            <!-- <el-table-column label="退款数量" align="center" min-width="120">
              <template slot-scope="scope">
                <el-input-number
                  v-model="scope.row['refund_num']"
                  type="number"
                  :min="1"
                  :max="scope.row.max_num"
                  style="width: 100px;"
                  controls-position="right"
                  @change="limitNum(scope.row)"
                />  
              </template>
            </el-table-column> -->
          </el-table>
        </div>

      </div> 
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取消</el-button>
        <el-button type="primary" @click="submitForm" :loading="btnloading" size="small">确定改签</el-button>
      </span>    
    </el-dialog> 

  </div>
</template>

<script>

import { getRundProductApi, getRundMessageApi, rundCreateApi, computeRefundPrice ,getChangeListApi ,orderChangeConfirmApi} from '@/api/order'

export default {
  name: 'OrderCancellate',
  data() {
    return {
      templateRadio: 0,
      dialogVisible: false,
      loading: true,
      btnloading: false,
      code: '',
      order_id: "",
      ruleValidate: {
        refund_price: [{ required: true, message: '请输入退款金额', trigger: 'blur' }],
        refund_message: [{ required: true, message: '请选择退款原因', trigger: 'change' }],
      },
      refund_price: "",
      refund_message: "",
      mer_mark: "",
      reasonList: [],
      multipleSelection: [],
      ids: [],
      changeList: [],
      maxRefundPrice: 0,
      currentRow: ''
    }
  },
  methods: {
    getTemplateRow(idx, row) {
      /* eslint-disable */
      // console.log(idx, row)
      // form_create_helper.set(this.$route.query.field, {src:row.avatar || this.moren,id:row.uid})
      // form_create_helper.close(this.$route.query.field);
       this.currentRow = row;
    },
    handleCurrentChange(val) {
      console.log(123,val)
        this.currentRow = val;
    },
    submitForm() {
      var buy_type = this.currentRow.product.buy_type;
      // 产品套餐日历
      let data = '';
      if(!this.currentRow.id){
        return this.$message.warning('请选择日期!')
      }
      if(buy_type == 1){
        data = {
          order_id: this.order_id,
          buy_type: buy_type,
          price_date_id: this.currentRow.id,
        }
      } else {
        data = {
          order_id: this.order_id,
          buy_type: buy_type,
          line_plan_id: this.currentRow.id,
          line_plan_meal_id: this.currentRow.linePlanMealId,
        }
      }
  
      this.btnloading = true
      orderChangeConfirmApi(data).then(res => {
        this.btnloading = false
        this.$message.success('改签成功')
        this.dialogVisible = false
        this.$emit('refundSuccess')
      }).catch(({ message }) => {
        this.btnloading = false
        this.$message.error(message)
      })
    },
    // 计算退款金额
    getRefundPrice(){
      const refundData = {}
      this.multipleSelection.map((item) => {
        refundData[item.order_product_id] = item.refund_num
      })
      computeRefundPrice({ order_id: this.order_id, refund: refundData}).then(res => {
        this.refund_price = res.data.totalRefundPrice
      }).catch(({ message }) => {
        this.refund_price = 0 
        this.$message.error(message)
      })
    },
    //订单详情
    getOrderDetails(id) {
      this.order_id = id
      this.loading = true
      this.dialogVisible = true
      getChangeListApi(id).then(res => {
   
        console.log('1231',res)
        this.changeList = res.data;   
       
        this.loading = false 
      }).catch(({ message }) => {
        this.dialogVisible = false
        this.loading = false
        this.$message.error(message)
      })
    },
    //退款原因
    getRefundMessage(){
      getRundMessageApi().then(res => {
        this.reasonList = res.data
        this.refund_message = res.data[0]
      }).catch(({ message }) => {
        this.$message.error(message)
      })
    },
    // 选择产品
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.getRefundPrice();
    },
    limitNum(row){
      if(row.refund_num > row.max_num){
        row.refund_num = row.max_num
      }else if(row.refund_num < 1){
        row.refund_num = 1
      }
      this.getRefundPrice()
    }
  }
}
</script>

<style scoped lang="scss">
.title{
  margin-bottom: 16px;
  color: #17233d;
  font-weight: 500;
  font-size: 14px;
}
.tabBox_tit {
  max-width: 60%;
  font-size: 12px !important;
  margin: 0 2px 0 10px;
  letter-spacing: 1px;
  padding: 5px 0;
  box-sizing: border-box;
}
::v-deep .current-row td {
    background-color: #ada00a !important;
}
::v-deep .el-table__body tr.current-row>td{
    background-color: #69A8EA !important;
  }
</style>
